<template>
  <div class="app-container">
    <el-dialog title="审批历史" :visible.sync="dialogVisible" :close-on-click-modal="false" width="90%" top="50px" custom-class="historyDialog">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="流程审批进度历史" name="first">
          <div class="text item">
            <el-table max-height="600" :data="circulationHistoryList" border style="width: 100%" stripe>
              <el-table-column prop="id" label="#" align="center" type="index" width="70" />
              <el-table-column prop="processOper" label="任务名称" align="center" />
              <el-table-column prop="processBy" label="处理人" align="center" />
              <el-table-column prop="status" label="审批操作" align="center">
                <template slot-scope="scope">
                  <div v-if="scope.row.auditStatus == 1">
                    审批通过
                  </div>
                  <div v-if="scope.row.auditStatus == 2">
                    审批驳回
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="remarks" label="审批意见" align="center" :show-overflow-tooltip="true" />
              <!-- <el-table-column prop="updateTime" label="耗时" align="center" /> -->
              <!-- <el-table-column prop="circulation" label="流转" align="center" /> -->
              <el-table-column prop="updateTime" label="处理时间" align="center" width="180" />
              <el-table-column prop="status" label="状态" align="center" width="90">
                <template slot-scope="scope">
                  <div v-if="scope.row.status == 0" class="warning-color">
                    待处理
                  </div>
                  <div v-if="scope.row.status == 1" class="primary-color">
                    已处理
                  </div>
                  <div v-if="scope.row.status == 2" class="primary-color">
                    无需处理
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" icon="el-icon-document" @click="handleDetail(scope.row)">附加信息</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="实时流程图" name="second">
          <div v-if="source === 'apply'" class="xjs">
            <img :src="'./' + globalConfig.folderName + '/xjs.png'" width="100%" alt="">
            <span :class="[globalConfig.folderName, 'status' + historyStatus]" />
          </div>
          <!-- <div v-if="source === 'stageReview'" class="jdps">
            <img :src="'./' + globalConfig.folderName + '/jdps.png'" width="100%" alt="">
            <span :class="[globalConfig.folderName, 'status' + historyStatus]" />
          </div> -->
          <div v-else class="ns">
            <img :src="'./' + globalConfig.folderName + '/ns.png'" width="100%" alt="">
            <span :class="[globalConfig.folderName, 'status' + historyStatus]" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <el-dialog
      title="附加信息"
      :visible.sync="detailDialogVisible"
      width="30%"
    >
      <div class="flex flex-column">
        <div v-for="(item, index) in detailData" :key="index" class="flex mt20">
          <span>{{ otherkeyMaps[item.key] }}: </span>
          <div v-if="item.key==='attach'">
            <span v-for="file in item.value" :key="file">
              <a style="color: #0d84ff;" :href="file.url">{{ file.name }}，</a>
            </span>
          </div>
          <span v-else-if="item.key==='auditStatus'" />
          <span v-else-if="item.key==='payType'">
            {{ item.value===1?'个人' : '医保' }}
          </span>
          <span v-else>{{ item.value }}</span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import { newWorkOrderList } from '@/api/xjs/work-order'
import { getDuration } from '@/utils/costum'
import { mapGetters } from 'vuex'

export default {
  props: {
    source: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      activeName: 'first',
      getDuration,
      dialogVisible: false,
      isLoadingStatus: true,
      currentNode: {
        hideTpls: null,
        writeTpls: null
      },
      nodeStepList: [],
      circulationHistoryList: [],
      activeIndex: 0,
      processStructureValue: {
        workOrder: { title: '' }
      },
      processId: null,
      workOrderId: null,
      historyStatus: null,
      detailDialogVisible: false,
      detailData: null,
      otherkeyMaps: {
        auditStatus: '审核状态',
        payName: '收费名称',
        payPrice: '支付价格',
        openTime: '开通时间',
        insuranceNo: '医保编码',
        payType: '支付方式',
        remarks: '备注',
        attach: '附件'
      }
    }
  },
  computed: {
    ...mapGetters(['userId', 'globalConfig'])
  },
  created() {},
  methods: {
    getImgUrl(node) {
      if (node.label === '院外评审/备案结果') {
        return require('@/assets/xjs/院外评审备案结果.png')
      } else {
        return require('@/assets/xjs/' + node.label + '.png')
      }
    },
    handleDetail(row) {
      console.log('row', row)
      if (row.task && row.task !== '{}') {
        try {
          const taskObj = JSON.parse(row.task)
          this.detailData = Object.entries(taskObj).map(([key, value]) => ({ key, value }))
          console.log('detailData', this.detailData)
          this.detailDialogVisible = true
        } catch (error) {
          console.error('解析 task 字段失败', error)
          this.$message.error('解析 task 字段失败')
        }
      } else {
        this.$message.warning('该条记录没有附加信息')
      }
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    open(row, category = 1) { // category: 1：新技术 2：年审
      this.dialogVisible = true
      this.historyStatus = row.status
      this.getProcessNodeList(row.id, category)
    },
    getProcessNodeList(correlationId, category) {
      newWorkOrderList({
        correlationId: correlationId,
        category: category,
        pageSize: 0
      }).then(response => {
        this.circulationHistoryList = response.records
        // this.processStructureValue = response.data
        // this.circulationHistoryList = this.processStructureValue.circulationHistory
        // if (
        //   this.processStructureValue.workOrder.current_state_name !==
        //     '申报完成' &&
        //   this.processStructureValue.workOrder.status !== 3
        // ) {
        //   const currentCirculation = {
        //     state: this.processStructureValue.workOrder.current_state_name,
        //     processor: this.processStructureValue.workOrder.principals,
        //     status: 3,
        //     remarks: '',
        //     cost_duration: 0,
        //     circulation: this.processStructureValue.workOrder.current_state_name
        //   }
        //   this.circulationHistoryList.unshift(currentCirculation)
        // }

        // // 获取当前展示节点列表
        // this.nodeStepList = []
        // if (this.processStructureValue.nodes) {
        //   for (var i = 0; i < this.processStructureValue.nodes.length; i++) {
        //     if (
        //       this.processStructureValue.nodes[i].id ===
        //       this.processStructureValue.workOrder.current_state
        //     ) {
        //       // 当前节点
        //       this.nodeStepList.push(this.processStructureValue.nodes[i])
        //       this.activeIndex = this.nodeStepList.length - 1
        //       if (i + 1 === this.processStructureValue.nodes.length) {
        //         this.activeIndex = this.nodeStepList.length
        //       }
        //       this.currentNode = this.processStructureValue.nodes[i]
        //     } else if (!this.processStructureValue.nodes[i].isHideNode) {
        //       // 非隐藏节点
        //       this.nodeStepList.push(this.processStructureValue.nodes[i])
        //     }
        //   }
        // }
        // console.log(this.nodeStepList)
        // this.dialogVisible = true
        // this.isLoadingStatus = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.xjs {
    width: 70%;
    margin: 50px auto;
    position: relative;
    span {
        display: inline-block;
        position: absolute;
        &.PTZX {
            &.status10 {
                width: 183px;
                height: 110px;
                border: 4px solid red;
                left: 12%;
            }
            &.status20 {
                width: 187px;
                height: 110px;
                border: 4px solid red;
                left: 33.5%;
            }
            &.status30 {
                width: 187px;
                height: 110px;
                border: 4px solid red;
                left: 53.5%;
            }
            &.status40 {
                width: 183px;
                height: 110px;
                border: 4px solid red;
                left: 77%;
            }
            &.status50 {
                width: 183px;
                height: 110px;
                border: 4px solid red;
                left: 55.3%;
                top: 64.2%;
            }
            &.status60 {
                width: 183px;
                height: 110px;
                border: 4px solid red;
                left: 33.7%;
                top: 64.2%;
            }
            &.status70 {
                width: 183px;
                height: 110px;
                border: 4px solid red;
                left: 11.9%;
                top: 64.2%;
            }
        }
        &.SHZY {
            &.status10 {
                width: 190px;
                height: 100px;
                border: 4px solid red;
                left: 10.2%;
            }
            &.status60 {
                width: 187px;
                height: 100px;
                border: 4px solid red;
                left: 29.5%;
            }
            &.status50 {
                width: 187px;
                height: 100px;
                border: 4px solid red;
                left: 46.7%;
            }
            &.status20 {
                width: 183px;
                height: 100px;
                border: 4px solid red;
                right: 67%;
            }
            &.status120 {
                width: 183px;
                height: 100px;
                border: 4px solid red;
                right: 0;
                top: 54.2%;
            }
            &.status30 {
                width: 183px;
                height: 100px;
                border: 4px solid red;
                left: 65.3%;
                top: 54.2%;
            }
            &.status130 {
                width: 183px;
                height: 100px;
                border: 4px solid red;
                left: 46.7%;
                top: 54.2%;
            }
            &.status140 {
                width: 183px;
                height: 100px;
                border: 4px solid red;
                left: 27.7%;
                top: 54.2%;
            }
            &.status70 {
                width: 183px;
                height: 100px;
                border: 4px solid red;
                left: 8.7%;
                top: 54.2%;
            }
            &.status80 {
                width: 62px;
                height: 61px;
                border: 4px solid red;
                left: 0;
                top: 59.2%;
                border-radius: 50%;
            }
        }
    }
}
.jdps {
    width: 50%;
    margin: 150px auto;
    position: relative;
    span {
        display: inline-block;
        position: absolute;
        &.status110 {
            width: 183px;
            height: 110px;
            border: 4px solid red;
            left: 21%;
            top: 0.2%;
        }
        &.status120 {
            width: 183px;
            height: 110px;
            border: 4px solid red;
            left: 56.5%;
            top: 0.2%;
        }
    }
}
.ns {
    width: 70%;
    margin: 150px auto;
    position: relative;
    span {
        display: inline-block;
        position: absolute;
        &.PTZX {
            &.status80 {
                width: 72px;
                height: 73px;
                border: 4px solid red;
                left: 0%;
                top: 17.2%;
                border-radius: 50%;
            }
            &.status90 {
                width: 250px;
                height: 135px;
                border: 4px solid red;
                left: 14.7%;
                top: 0.2%;
            }
            &.status100 {
                width: 250px;
                height: 135px;
                border: 4px solid red;
                left: 40.7%;
                top: 0.2%;
            }
            &.status110 {
                width: 250px;
                height: 135px;
                border: 4px solid red;
                left: 66.7%;
                top: 0.2%;
            }
        }
        &.SHZY {
            &.status90 {
                width: 200px;
                height: 115px;
                border: 4px solid red;
                left: 14.7%;
                top: 0;
            }
            &.status100 {
                width: 200px;
                height: 115px;
                border: 4px solid red;
                left: 39.7%;
                top: 0%;
            }
            &.status101 {
                width: 200px;
                height: 115px;
                border: 4px solid red;
                left: 66.7%;
                top: 0%;
            }
            &.status110 {
                width: 72px;
                height: 73px;
                border: 4px solid red;
                right: 0%;
                top: 17.2%;
                border-radius: 50%;
            }
        }
    }
}
</style>
